<!-- 双栏 -->
<template>
    <div
        ref="layoutVesselRef"
        :style="boxStyle"
        class="layout-vessel js-empty-layout clearfix"
    >
        <div :style="leftBoxStyle" class="cell">
            <widget-view-vessel
                v-model="leftWidgetList"
                :widget-data="element"
                :disabled="draggableDisabled"
                :custom-class="['layout-vessel-draggable']"
                :custom-style="{}"
                :preview="preview"
                placeholder=""
                disabled-placeholder="不可放置"
            />
        </div>
        <div :style="rightBoxStyle" class="cell border-cell">
            <widget-view-vessel
                v-model="rightWidgetList"
                :widget-data="element"
                :disabled="draggableDisabled"
                :custom-class="['layout-vessel-draggable']"
                :custom-style="{}"
                :preview="preview"
                placeholder=""
                disabled-placeholder="不可放置"
            />
        </div>
        <div
            :style="cellDragHandleStyle"
            class="cell-drag ui-draggable-handle"
            @mousedown.stop="onDragCell"
        >
            <span></span>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref, computed } from 'vue'
import useWidgetDraggable from '@/libs/edit/widgetDraggable'
import WidgetViewVessel from '../../widget-view-vessel'
import whiteList from './white-list'
import { cellWidthFlex } from './cell-width-dictionary'
export default defineComponent({
    name: 'WidgetLayoutVessel',
    components: {
        WidgetViewVessel
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        },
        // 预览模式
        preview: {
            type: Boolean,
            default: false
        }
    },
    setup(props, { emit }) {
        const { element, preview } = toRefs(props)

        const {
            draggableWidgetType
        } = useWidgetDraggable()

        const layoutVesselRef = ref(null)

        const leftWidgetList = computed({
            get: () => element.value?.eles?.content?.leftEles || [],
            set: val => {
                element.value.eles.content.leftEles = val
            }
        })

        const rightWidgetList = computed({
            get: () => element.value?.eles?.content?.rightEles || [],
            set: val => {
                element.value.eles.content.rightEles = val
            }
        })

        const draggableDisabled = computed(() => {
            return !!draggableWidgetType.value && !whiteList.includes(draggableWidgetType.value)
        })

        const boxStyle = computed(() => {
            const style = element.value.eles.style || {}
            return {
                opacity: style.opacity,
                marginTop: style['margin-top'],
                backgroundColor: style['background-color'],
                backgroundImage: style['background-image']
            }
        })

        const leftBoxStyle = computed(() => {
            const customFeature = element.value.eles.customFeature || {}
            return {
                flex: `${cellWidthFlex(customFeature.cellWidth)} 1 0%`
            }
        })

        const rightBoxStyle = computed(() => {
            const customFeature = element.value.eles.customFeature || {}
            return {
                borderLeft: `${customFeature.CellBorderWidth} ${customFeature.CellBorderStyle} ${customFeature.CellBorderColor}`
            }
        })

        const cellDragHandleStyle = computed(() => {
            const customFeature = element.value.eles.customFeature || {}
            return {
                left: `${customFeature.cellWidth}%`,
                opacity: customFeature.CellBorderStyle === 'none' ? 1 : 0
            }
        })

        const onDragCell = e => {
            const startLeft = e.pageX - e.srcElement.getBoundingClientRect().left

            document.onmousemove = event => {
                event = event || window.event
                event.stopPropagation()
                event.preventDefault()
                document.body.style.cursor = 'ew-resize'
                const layoutVesselRect = layoutVesselRef.value.getBoundingClientRect()
                const offsetPercent = (event.pageX - startLeft - layoutVesselRect.left) / layoutVesselRect.width
                if (Math.ceil(offsetPercent * 100) > 0 && Math.ceil(offsetPercent * 100) < 100) {
                    element.value.eles.customFeature.cellWidth = Math.ceil(offsetPercent * 100)
                }
            }
            document.onmouseup = () => {
                document.body.style.cursor = ''
                document.onmousemove = null
                document.onmouseup = null
            }
        }
        
        return {
            element,
            preview,

            layoutVesselRef,
            leftWidgetList,
            rightWidgetList,
            draggableDisabled,
            boxStyle,
            leftBoxStyle,
            rightBoxStyle,
            cellDragHandleStyle,
            onDragCell
        }
    }
})
</script>

<style lang="less" scoped>
@import './widget-layout-vessel.less';
</style>